<template>
    <div class="content">
        <!-- 手记 顶部搜索栏 -->
        <div class="m-content">
            <div class="logoBlock">
                <!-- <el-avatar :size="50"></el-avatar>
                <div>用户名</div> -->
                <a href="#" title="手记">
                    <img src="~/assets/img/articleHeader-logo.png" width="100%" height="100%" alt="手记">
                </a>
            </div>
            <div class="searchArticle">
                <el-input placeholder="搜索感兴趣的知识和文章" class="input-with-select" v-model="mBlogQuery.searchArticleContent"   @keydown.enter.native="searchArticle()">    
                </el-input><el-button slot="append" icon="el-icon-search" @click="searchArticle()"></el-button>
            </div>
            <div class="writeArticle">
                <el-button type="primary" icon="el-icon-edit" @click="editArticle()">写文章</el-button>
            </div>
        </div>

        <div class="infinite-list-wrapper" ref="scrollMenuRef" style="overflow:auto; height: 900px" @mouseover="isInDiv()" @mouseleave="isLeaveDiv()">

            <div class="typeBlock">
                <el-row class="tac">
                    <el-col :span="22">
                        <el-menu
                        default-active="-1"
                        class="el-menu-vertical-demo">
                            <!-- 这里点击事件绑定为 getListByMBlogQuery(-1)，是因为用户可以会输入文章内容进行搜索 -->
                            <el-menu-item index="-1"  @click="getListByMBlogQuery(-1)">
                                <span slot="title">全部</span>
                            </el-menu-item>
                            <el-menu-item v-for="item in blogTypeList" :key="item.id" :index="item.sort.toString()"  @click="getListByMBlogQuery(item.id)">
                                <span slot="title">{{item.title}}</span>
                            </el-menu-item>

                        </el-menu>
                    </el-col>
                </el-row>

            </div>

            <ul
                class="list"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled">
                <el-timeline>
                    <li v-for="(item, index) in blogList" :key="item.id" class="list-item">
                        <el-timeline-item :timestamp="item.gmtModified" placement="top">
                            <el-card>
                                <!-- <a :href="'/course/' + item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a> -->
                                <!-- <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">{{blog.title}}</router-link> -->
                                <!-- <h4>{{item.title}}</h4> -->
                                <p class="article_title"><router-link :to="{path: '/article/' + item.id}" style="text-decoration: none;">{{item.title}}</router-link></p>
                                <p class="article_description">
                                    {{item.description}}
                                </p>
                                <p id="view_count" :class="[{'teacher_identification': Number(signList[index]) === 1}]">
                                    {{item.nickname}}的博客&nbsp;&nbsp;
                                    <i class="el-icon-view"></i>
                                    &nbsp;{{item.viewCount}}</p>
                            </el-card>
                        </el-timeline-item>
                    </li>
                    
                </el-timeline>
            </ul>
            <p v-if="loading" style="text-align:center">加载中...</p>
            <p v-if="noMore" style="text-align:center">没有更多了</p>
            
        </div>
    </div>
</template>

<script>

import blogApi from '@/api/blog'
import cookie from 'js-cookie'

export default {
//layout: 'articleHeader',

    data() {
        return {
            tabPosition: 'left',
            count: 10,
            loading: false,
            inDiv: false,
            len: 0,

            blogTypeList: [], //博客类型列表
            blogList: [], //博客列表
            mBlogQuery: {
                blogType: -1,
                searchArticleContent: ''
            },//根据博客类别和相关信息查询
            signList: [], //标识列表
        };
    },
    computed: {
        noMore () {
            return this.count >= this.len
        },
        disabled () {
            return this.loading || this.noMore
        }
    },
    created() {
        this.getBlogTypeList()
        if (typeof(this.$route.query.searchArticleContent) == 'undefined') {
            this.getBlogList()
        } else {
            this.mBlogQuery.searchArticleContent = this.$route.query.searchArticleContent
            this.getListByMBlogQuery(this.mBlogQuery.blogType)
        }
    },
    mounted() {
            // 监听浏览器/页面滚动条的滚动
            window.addEventListener("scroll", this.scrollContent, true);
            // 监听el-scrollbar内滚动条的滚动
            this.$refs.scrollMenuRef.addEventListener("scroll", this.scrollMenu, true);
            //this.$refs.scrollMenuRef.wrap.addEventListener("scroll", this.scrollMenu, true);
    },
    methods: {
        editArticle() {
            if (cookie.get('ucenter')) {
                //移除事件监听
                // 监听浏览器/页面滚动条的滚动
                window.removeEventListener("scroll", this.scrollContent);
                // 监听el-scrollbar内滚动条的滚动
                this.$refs.scrollMenuRef.removeEventListener("scroll", this.scrollMenu);
                console.log('取消监听')

                this.$router.push({path:'/editArticle/'})
            } else {
                this.$message({
                    message: '请先登录',
                    type: 'info'
                });
                this.$router.push('/login')
            }
        },

        //根据文章标题、简介、内容搜索文章
        searchArticle() {
            if (this.mBlogQuery.searchArticleContent.length == 0) {
                this.$message({
                    message: '请先输入关键词',
                    type: 'warning'
                });
            } else {
                this.getListByMBlogQuery(this.mBlogQuery.blogType)
            }
        },

        //根据博客类别和相关信息查询
        getListByMBlogQuery(index) {
            this.mBlogQuery.blogType = index
            // if (index === -1) {
            //     this.getBlogList()
            // } else {
            blogApi.getListByMBlogQuery(this.mBlogQuery).then(response => {
                this.blogList = response.data.data.items,
                this.len = response.data.data.len,
                this.signList = response.data.data.signs
            })
            // }

        },

        //查询博客列表
        getBlogList() {
            blogApi.getBlogList()
                .then(response => {
                    this.blogList = response.data.data.items,
                    this.len = response.data.data.len,
                    this.signList = response.data.data.signs
                })
        },

        //查询博客类型列表
        getBlogTypeList() {
            blogApi.getBlogTypeList()
                .then(response => {
                    this.blogTypeList = response.data.data.items
                })
        },

        isInDiv() {
            this.inDiv = true
        },

        isLeaveDiv() {
            this.inDiv = false
        },

        // el-scrollbar内滚动条滚动时，打印滚动条向下滚动的距离
        scrollMenu() {
            if(this.inDiv) {
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                let scrollTop2 = this.$refs.scrollMenuRef.scrollTop * document.body.scrollHeight / this.$refs.scrollMenuRef.scrollHeight
                window.scrollTo(0, this.$refs.scrollMenuRef.scrollTop / (this.len * 0.5) + 100)
            }
            
        },
        // 页面滚动时触发
        scrollContent() {
            if (!this.inDiv) {
                // scrollTop为显示屏顶部与整个文档顶部间的距离
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 页面滚动条滚动时，el-scrollbar内滚动条按比例跟随一起滚动
                this.$refs.scrollMenuRef.scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) * (this.len / 2) - 100
                //this.$refs.scrollMenuRef.scrollTop = (scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.scrollHeight) + (bl * (scrollTop / document.body.scrollHeight * this.$refs.scrollMenuRef.scrollHeight))
            }
        },

        load () {
            this.loading = true
            console.log(this.count)
            setTimeout(() => {
                this.count += 100
                this.loading = false
            }, 500)
        }
    },



}

</script>

<style scoped>
.content {
    /* 上 右 下 左 */
    margin: 10px 0px 0px 0px;
    /* padding-bottom: 100px; */
}

.m-content {
    max-width: 1150px;
    margin: 0 auto;
    align-items: center;
    display: flex;
    position: relative;
}
.logoBlock {
    width: 10%;
    padding: 5px;
    display: inline-block;
}
.searchArticle {
    vertical-align: top;
    display: inline-block;
    position: absolute;
    right: 130px;
}
.el-input {
    /* 搜索框长度 */
    width: 400px;
}
.writeArticle {
    background-color: cadetblue;
    /* https://blog.csdn.net/qq_44131760/article/details/104755826  解释了为什么使用 vertical-align*/
    vertical-align: top;
    display: inline-block;
    position: absolute;
    right: 10px;
}


.infinite-list-wrapper {
    padding-left: 15%;
}

.typeBlock {
    display:inline-block;
    width: 15%;

    vertical-align: top;

} 

.list {
    display:inline-block; 
    width: 70%;
    border: 5px solid #F3F5F6;
    border-radius: 10px;
}

.list-item {
    width: 95%;
}

#view_count {
    /* color: #999AAA; */
    text-align: right;
    font-size: 15px;
}

p.article_title {
    font-size: 20px;
}

p.article_description {
    color: #999AAA;
    font-size: 18px;
    margin-top: 10px;
}
.infinite-list-wrapper::-webkit-scrollbar{display: none;}

  
</style>